<template>
  <div class="my-index">
    <div class="user-info">
      <!--头像信息  -->
      <div class="base-info">
        <van-cell-group :border="false">
          <van-cell
              center
              v-if="user"
          >
            <van-image
                slot="icon"
                width="66"
                height="66"
                round
                fit="cover"
                :src="currentUser.photo"
            />
            <div slot="title" class="title">{{currentUser.name}}</div>
            <van-button
                size="small"
                round>
              编辑资料</van-button>
          </van-cell>
          <div class="not-login"  @click="onclick" v-else>
            <div>
              <img class="image-user" src="../../assets/user.jpg">
            </div>
            <div class="text">登录/注册</div>
          </div>
        </van-cell-group>


      </div>
<!--统计信息-->
      <div class="data-info" v-if="user">
        <van-grid :border="false">
          <van-grid-item>
            <div slot="text" class="text-wrap">
              <div class="span">{{currentUser.art_count}}</div>
              <div class="text">头条</div>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div slot="text" class="text-wrap">
              <div class="span">{{currentUser.like_count}}</div>
              <div class="text">关注</div>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div slot="text" class="text-wrap">
              <div class="span">{{currentUser.fans_count}}</div>
              <div class="text">粉丝</div>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div slot="text" class="text-wrap">
              <div class="span">{{ currentUser.follow_count}}</div>
              <div class="text">获赞</div>
            </div>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <div class="nav-gird">
      <van-grid :column-num="2" :border="false">
        <van-grid-item icon="star-o" text="收藏" />
        <van-grid-item icon="clock-o" text="历史"/>
      </van-grid>
    </div>
    <div class="info">
      <van-cell-group :border="false" class="mb-4">
        <van-cell title="消息通知" is-link to=""/>
      </van-cell-group>
      <van-cell-group :border="false" class="mb-4">
        <van-cell title="小智同学" is-link to=""/>
      </van-cell-group>
      <van-cell-group @click="ontcClick" :border="false" class="mb-4" v-if="user">
        <van-cell  title="退出登录" class="info-tc"/>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {getCurrentUser} from '@/api/user'
export default {
  name: "myIndex",
  data(){
    return{
      currentUser:{}
    }
  },
  created() {
    this.loadCurrentUser()
  },
  methods:{
    onclick(){
      this.$router.push('/login')
    },
    ontcClick(){
      this.$dialog.confirm({
        title: '退出提示',
        message: '退出后不会删除任何历史数据，下次登录依然可以使用本账号',

      }).then(() => {
        this.$store.commit('setUser',null)
      }).catch(()=>{

      })
    },
   async loadCurrentUser(){
      const {data}=await getCurrentUser()
     // console.log(data);
     this.currentUser=data.data
   }
  },
  computed:{
    ...mapState(['user'])
  }
}
</script>

<style scoped lang="less">
.my-index{
  .user-info{
    background-color: #3a8ee6;
    .base-info{
      box-sizing: border-box;
      padding-top: 38px;
      padding-bottom: 11px;
      .van-cell-group{
        .van-cell{
          background-color:#3a8ee6;
          color: #ffffff;
        }
        .title{
          margin-left: 10px;
          font-size: 16px;
        }
      }
    }
    .data-info{
      /deep/.van-grid-item__content{
        background-color: #3a8ee6;
        color: #ffffff;
        height: 65px;
        .text-wrap{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        .span{
          font-size: 18px;
        }
        .text{
          font-size: 11px;
        }
      }
    }
  }
  .nav-gird{
    .van-grid{
      margin-bottom: 4px;
      .van-grid-item{
        /deep/.van-grid-item__content{
          height: 70px;
          .van-icon{
            color: #eb5253;
          }
        }
      }
    }

  }
  .info{
    .info-tc{
      text-align: center;
      color: red;
      margin-bottom: 4px;
    }
  }
  .mb-4{
    margin-bottom: 4px;
  }
}
.not-login{
  height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #3a8ee6;
  .image-user{
    width: 66px;
    height: 66px;
    border-radius: 50%;
  }
  .text{
    margin-top: 10px;
    font-size: 18px;
    color: #ffffff;
  }
}

</style>